<template>
    <div class="dataSearch">
        <el-tabs>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-message"></i> 数据看板</span>
                <kanban ref="kanban"/>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> 新建分析</span>
                <AddAnalysis/>
            </el-tab-pane>
        </el-tabs>
        <el-button class="lead" type="primary" size="mini" @click="getSelect">导入</el-button>
        <el-dialog title="导入" :visible.sync="dialogFormVisible" width="400px">
            <el-form>
                <el-form-item label="上传文件">
                    <input type="file" class="lead-file" accept=".json" ref="file">
                    <el-button type="primary">上传文件</el-button>
                </el-form-item>
                <el-form-item label="关联任务">
                    <el-select placeholder="请选择任务" v-model="siteTaskId">
                        <el-option v-for="(item,index) in selectList" :key="index" :label="item.title" :value="item.idWebSiteTask"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="getFile">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import kanban from './kanban'
    import AddAnalysis from './AddAnalysis.vue'
    import {AnalyzeRulePost,WebAnalyzeTaskPost,WebSiteTask} from '../../api/api'
    export default {
        name: "analysis",
        data(){
          return{
              dialogFormVisible:false,
              selectList:[],
              siteTaskId:''
          }
        },
        components: {
            kanban,
            AddAnalysis
        },
        methods:{
            getSelect(){
                this.dialogFormVisible=true;
                this.siteTaskId='';
                if(this.selectList.length===0){
                    WebSiteTask({
                        current:1,
                        size:999999
                    }).then(res=>{
                        this.selectList=res.data.records
                    })
                }
            },
            cancel(){
                this.$refs.file.value='';
                this.siteTaskId='';
                this.dialogFormVisible=false;
            },
            getUUID () {
                const s = [];
                const hexDigits = '0123456789abcdefghijklmnopqrstuvwxyz';
                for (let i = 0; i < 12; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
                }
                const uuid = s.join('');
                return uuid
            },
            getFile() {
                const that=this;
                console.log(that.$refs.file.files)
                let files = that.$refs.file.files;//获取到文件列表
                if(files.length===0){
                    that.$message.error('请选择文件')
                }else if(this.siteTaskId===''||this.siteTaskId===undefined){
                    that.$message.error('请选择关联任务')
                }else if (files.length !== 0) {
                    let reader = new FileReader();//新建一个FileReader
                    reader.readAsText(files[0], "UTF-8");//读取文件
                    reader.onload = function (evt) { //读取完文件之后会回来这里
                        let fileString = JSON.parse(evt.target.result); // 读取文件内容
                        let analyzeRule=JSON.parse(JSON.stringify(fileString.analyzeRule));
                        let idWebAnalyzeTask=that.getUUID();
                        let idAnalyzeRule=that.getUUID();
                        let idWebSiteTask=that.siteTaskId;
                        delete fileString.analyzeRule;
                        fileString.idWebAnalyzeTask=idWebAnalyzeTask;
                        fileString.idWebSiteTask=idWebSiteTask;
                        analyzeRule.forEach(item=>{
                            item.idWebAnalyzeTask=idWebAnalyzeTask;
                            item.idAnalyzeRule=idAnalyzeRule;
                            item.idWebSiteTask=idWebSiteTask;
                            AnalyzeRulePost(item).then(()=>{})
                        });
                        WebAnalyzeTaskPost(fileString).then(()=>{
                            that.$refs.kanban.getListData();
                            that.$refs.file.value='';
                            that.dialogFormVisible=false;
                        })
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .dataSearch{
        margin: 0 50px 60px;
        background: #fff;
        padding: 0 24px;
        position: relative;
        .lead{
            position: absolute;
            top: 5px;
            right: 20px;
        }
        .lead-file{
            z-index: 999;
            width: 98px;
            height: 40px;
            opacity: 0;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 68px;
        }
        ::v-deep{
            .el-tabs{
                border: none;
                box-shadow:none;
            }
            .el-tabs--border-card>.el-tabs__header{
                background: none;
            }
            .el-tabs__content{
                min-height: calc(100vh - 211px);
            }
            .el-tabs__header{
                margin-bottom: 0;
            }
            .el-form-item__content{
                position: relative;
            }
        }
    }
</style>